<template>
  <div class="boxWrap">
    <a-space>
      <div class="selectWrap">
        <a-tree-select :value="activeKey" :show-search="true" style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" :tree-data="tempTreeData" searchPlaceholder="请输入"
          :placeholder="placeholderMethods" :replaceFields="replaceFields" treeNodeFilterProp="title"
          @change="onTreeChange" />
      </div>
    </a-space>
  </div>
</template>
<script>
export default {
  name: "FormProcess",
  props: {
    menuId: {
      type: [String, Number],
      default: 2,
    },
    formData: {
      type: Object,
      default: () => { },
    },
    dataIndex: {
      type: String,
      default: "treeKey",
    },
    onCallBack: {
      type: Function,
      default: () => { },
    },
  },
  data() {
    return {
      replaceFields: {
        children: "child",
        title: "name",
        key: "id",
        value: "id",
      },
      treeData: [],
      activeKey: "",
    };
  },
  methods: {
    // 获取下拉框数据
    getTreeData() {
      let params = {
        companyCode: "",
      };
      let url = '';
      if ([9978,].includes(Number(this.menuId))) {
        url = this.$inspectionFlowList;
      } else if ([9979].includes(Number(this.menuId))) {
        url = this.$getDeptTree;
      } else {
        url = this.$listFlowtype;
      }
      this.getAxios(url, params)
        .then((res) => {
          if (res.code == 200) {
            let data = res.data;
            this.treeData = data.map((val) => {
              return {
                ...val,
                disabled: Array.isArray(val.children),
              };
            });
          }
        })
        .finally(() => { });
    },
    onDataChange() { },
    onTreeChange(val, lab, extra) {
      this.onCallBack(val, this.dataIndex);
    },
  },
  computed: {
    tempTreeData() {
      let list = this.treeData;
      list = list.map((val) => {
        let tempVal = val;
        if (Array.isArray(val[this.replaceFields["children"]])) {
          tempVal["disabled"] = true;
        }
        return tempVal;
      });
      return list;
    },
    placeholderMethods() {
      let res;
      if (this.menuId == 9979) {
        res = '请选择公司';
      } else {
        res = '请选择流程';
      }
      return res;
    }
  },
  mounted() {
    this.getTreeData();
  },
  watch: {
    formData: {
      handler(nVal, oVal) {
        this.activeKey = nVal[this.dataIndex] || null;
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>
<style lang="less" scoped>
.boxWrap {
  width: 100%;

  .selectWrap {
    width: 320px;
  }
}
</style>
